<template>
  <div class="search">
    <span>用户编号:</span>
    <el-input
      v-model="name"
      style="width: 200px"
      placeholder="输入用户编号"
    ></el-input>
    <span>订单编号:</span>
    <el-input
      v-model="phone"
      style="width: 200px"
      placeholder="请输入订单编号"
    ></el-input>

    <!-- <el-select v-model="orderType" style="width:160px; margin-right: 20px;" clearable placeholder="订单类型">
        <el-option
          v-for="item in orderTypeList"
          :key="item.orderTypeId"
          :label="item.orderType"
          :value="item.orderType"
        />
      </el-select> -->
    <span>订单状态</span>
    <el-select
      v-model="orderState"
      style="width: 160px; margin-right: 20px"
      clearable
      placeholder="订单状态"
    >
      <el-option
        v-for="item in orderStateList"
        :key="item.orderStateId"
        :label="item.orderStateName"
        :value="item.orderStateName"
        format="YYYY-MM-DD" value-format="YYYY-MM-DD"
      />
    </el-select>
 
    <span class="demonstration">订单时间段</span>
    <el-date-picker
      v-model="timeValue"
      type="datetimerange"
      range-separator="To"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
    />

    <el-button type="primary" icon="Search" @click="getAllOder">查询</el-button>
    <el-button type="danger" @click="deleteOrderAll">批量删除</el-button>
  </div>

  <el-table :data="tableData" v-loading="loading" border style="width: 100%" @selection-change="deleteAll">
    <el-table-column type="selection" width="55">
<!--      <input type="checkbox" v-model="checked" @click="checkedAll">-->
    </el-table-column>

    <el-table-column prop="userId" label="用户编号" />
    <el-table-column prop="orderNumber" label="订单编号" />
    <el-table-column prop="orderAmount" label="成交金额" />
    <el-table-column prop="orderTypeName" label="订单类型" />
    <el-table-column prop="orderStateName" label="订单状态">
      <template #default="scope">
        <el-popover placement="right" :width="200" trigger="click">
          <template #reference>
            <el-button style="margin-right: 16px; width: 104px">{{
              scope.row.orderStateName
            }}</el-button>
          </template>

          <el-table :data="orderStateList">
            <el-table-column width="150" property="role" label="选择订单状态">
              <template #default="scope1">
                <el-button
                  style="width: 100%"
                  @click="changeOrderState(scope.row.orderNumber, scope1.row)"
                  round
                >
                  {{ scope1.row.orderStateName }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <div class="example-pagination-block">
    <el-pagination
      layout="prev, pager, next"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      @current-change="changePage"
      background
      :total="pageTotal"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pageTotal: 2,
      pageSizes: [1, 2, 3],
      loading: false,
      orderTypeList: [],
      orderStateList: [],
      value: "",
      name: "",
      phone: "",
      orderType: "",
      orderState: "",
      timeValue:[],
      deleteOrder:[]
    };
  },
  methods: {
    getAllOder() {
      this.loading = true;
      this.axios({
        method: "post",
        url: "/api/order/getAllOrder",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.orderState,
          phone: this.phone,
          roleId: this.name,
          orderType: this.orderType,
          startTime:this.timeValue[0],
          endTime:this.timeValue[1]
        },
      }).then((pramer) => {
        if (pramer.data.code == 200) {
          this.tableData = pramer.data.data.list;
          this.pageTotal = pramer.data.data.total;
          this.loading = false;
        }
        if (pramer.data.code == 400) {
          ElMessage({
            showClose: true,
            message: "查询失败",
            type: "error",
          });
        }
        this.loading = false;
      });
    },
    changePage(p) {
      this.pageNum = p;
      this.getAllOder();
    },
    getOrdertype() {
      this.axios.get("/api/order/getOderType").then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.orderTypeList = res.data.data;
        }
      });
    },
    getOrderState() {
      this.axios.get("/api/order/getOrderState").then((res) => {
        this.orderStateList = res.data.data;
      });
    },
    changeOrderState(index, row) {
      // console.log(index);
      // console.log(row);
      this.axios
        .put("/api/order/changeOrderState/" + index + "/" + row.orderStateId)
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
          if (res.data.code == 400) {
            ElMessage({
              showClose: true,
              message: "修改失败",
              type: "error",
            });
          }
        });
      this.getAllOder();
    },
    deleteAll(orderId){
      if (orderId.length >0){
        for (let i = 0; i < orderId.length; i++) {
          this.deleteOrder.push(orderId[i].orderId)
        }
        console.log(this.deleteOrder)
      }
    },
    deleteOrderAll(){
      this.axios.delete('/api/order/deleteAllorder/'+this.deleteOrder).then((res)=>{
        console.log(res)
        if (res.data.code == 200) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.getAllOder();
        }
        if (res.data.code == 400) {
          ElMessage({
            showClose: true,
            message: "删除失败",
            type: "error",
          });
        }

      })
    }

  },
  created() {
    this.getAllOder();
    this.getOrderState();
    // this.getOrdertype();
  },
};
</script>

<style>
</style>